<template>
  <div class="login">
    <div class='header'>
    <img
        width="100"
        height="100"
        alt=""
        :src="imgUrl |handelImg"
        class="avatar"
        />
        <div class="div_r">
           <h2>用户名:{{username}}</h2>
        </div>
      </div>
     <van-cell-group inset>
      <van-field label="修改密码" model-value="输入框只读" readonly @click="changePwd"/>
      <van-field label="修改个人信息" model-value="输入框只读" readonly @click="changeUser"/>
      <van-field label="退出登录" model-value="输入框只读" readonly @click="ontLogin"/>
      <van-field label="我的订单" model-value="输入框只读" readonly @click="goOrder"/>
      <van-field label="我的收货地址" model-value="输入框只读" readonly @click="goAddress"/>
    </van-cell-group>

    <van-dialog v-model:show="show" title="修改密码" show-cancel-button @confirm="confirm" >
      <van-field
      v-model="oldpwd"
      type="text"
      name="nickName"
      label="旧密码"
      placeholder="旧密码"
     
    />
    <van-field
      v-model="newpwd"
      type="text"
      name="nickName"
      label="新密码"
      placeholder="旧密码"
     
    />
    </van-dialog>
  </div>
</template>

<script>
import { Collapse, CollapseItem } from 'vant';
import {getUserIfo , changePwt , changeUserIfo  } from '@/api/user';
import { Dialog } from 'vant';
import {getToken,removeToken} from '@/utils/auth.js';
import { ref } from 'vue';
export default {
//过滤器
filters:{
    handelImg(str){
      if(str){
          return str;
      }else{
          return "http://lanlianhua.work:8888/uploads/20220308/1653296306043.jpg";
      }
    }
},
  setup() {
    const show = ref(false);
    return { show };
  },
  data() {
    return {
      data:"",
      imgUrl:"",
      username:"",
      nickName:"",
      show:false,
      oldpwd:"",
      newpwd:"",
    };
 
  },
   beforeRouteEnter(to, from ,next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
    console.log(getToken());
    if(getToken()){
      next();
    }else{
      next("/login");
    };
     
  },
  beforeRouteUpdate(to, from) {
    
  },
  beforeRouteLeave(to, from,next) {
     
   next();
  
  },
  computed: {},
  watch: {},

  methods: { 
    //  先获取用户信息
   async init(){
          const res = await getUserIfo({
            processData: false,
            contentType: false,
          });
          console.log("res",res);
          this.data = res;
          this.imgUrl = res.avatar;
          this.username = res.userName;
          this.nickName = res.nickName;
    },
   //修改密码
   changePwd(){
       this.show = true;

   },
   //确定修改密码
   async confirm(){
    console.log(this.oldpwd,this.newpwd);
   const res = await changePwt({
        oldPassword:this.oldpwd,
        password:this.newpwd,
    });
    console.log(res);
   },
   //修改个人信息（昵称，头像）
  async changeUser(){
    
   //跳转页面  修改昵称和头像
   this.$router.push("/changeuser");
  },
  
   //退出登录
   ontLogin(){
      Dialog.confirm({
      title: '是否退出',
      message:
      '如果确认将会退出登录,取消返回',
    })
      .then(() => {
       // on confirm
       // 清空token;
        removeToken();
        localStorage.setItem('token',"");
        //跳转登录页面
        this.$router.push("/login");
       })
        .catch(() => {
     
      });
   },
   goOrder(){
    this.$router.push("/order");
   },
   goAddress(){
    this.$router.push("/address");
   },

  },
  created() {
  this.init()
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
  .login{
   
  }
  div_r,img{
  float:left;
  }
  h2{
      font-size:20px;
      padding-left:20px;
      color:#3e3e3e;
      margin-top:10px;
  }
  .header{
      height:100px;
       padding:20px;
  }
</style>


